<template>
	<view class="main">
		<view class="search">
			<input type="text" v-model="keyword" placeholder="请输入成员的手机号" @input="changeKeyword"/>
			<view class="search-btn" @click="getList">搜索</view>
		</view>
		<view class="member-list">
			<view class="member" v-for="(item, index) in members" :key="index" @click="selectMember(item.mobile)">
				<view class="left">
					<image :src="item.headavatar" mode="aspectFill" class="avatar"></image>
					<view class="info">
						<text>{{item.name}}</text>
						<text class="phone">{{item.mobile}}</text>
					</view>
				</view>
				<text class="gold">{{item.gold_num}}个</text>
			</view>
		</view>
		<u-popup v-model="show" mode="center" border-radius="14">
			<view class="popup">
				<text class="title">请输入发放的金币数量</text>
				<view class="input">
					<input type="number" v-model="gold_num">
					<text>个</text>
				</view>
				<view class="submit" @click="submit">确认</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {memberListApi, provideGoldApi} from '@/utils/api.js'
	export default {
		data() {
			return {
				keyword: '',
				members: [],
				// 选择用户
				selPhone: "",
				show: false,
				gold_num: 0,
				timer: null
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			getList(){
				memberListApi({phone: this.keyword}).then(res=>{
					this.members = res.data
					console.log(this.members);
				})
			},
			selectMember(phone){
				this.selPhone = phone;
				this.show = true
			},
			changeKeyword(){
				clearTimeout(this.timer)
				setTimeout(()=>{
					this.getList()
				}, 500)
			},
			submit(){
				if(this.gold_num <= 0){
					uni.showToast({
						icon: "none",
						title: "金币数量最少为1"
					})
				}else{
					let data = {
						phone: this.selPhone,
						gold_num: this.gold_num
					}
					provideGoldApi(data).then(res=>{
						if(res.code === 200){
							uni.showToast({
								title: "充值成功"
							})
							this.show = false;
						}else{
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						}
					})
				}
			}
		}
	}
</script>

<style scoped lang="less">
.main{
	width: 100%;
	min-height: 100vh;
	.search{
		width: 100%;
		box-sizing: border-box;
		padding: 10rpx 20rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10rpx;
		input{
			padding-left: 20rpx;
			background-color: #FAFAFA;
			width: 100%;
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 30rpx;
		}
		.search-btn{
			min-width: 120rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			border-radius: 30rpx;
			background-color: #4395FF;
			color: #FFF;
			margin-left: 15rpx;
		}
	}
	.member-list{
		width: 100%;
		box-sizing: border-box;
		.member{
			width: 100%;
			box-sizing: border-box;
			padding: 20rpx 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			margin-bottom: 10rpx;
			border-bottom: 1px solid #fafafa;
			.left{
				display: flex;
				.avatar{
					width: 75rpx;
					height: 75rpx;
					border-radius: 50%;
				}
				.info{
					display: flex;
					flex-direction: column;
					margin-left: 10rpx;
					.phone{
						font-size: 26rpx;
						color: #bebebe;
					}
				}
			}
			.gold{
				font-size: 30rpx;
				font-weight: bold;
				color: #FFD800;
			}
		}
	}
	.popup{
		width: 400rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: space-between;
		.title{
			font-weight: bold;
			font-size: 32rpx;
			margin: 15rpx 0;
		}
		.input{
			display: flex;
			align-items: center;
			font-size: 30rpx;
			font-weight: bold;
			input{
				border-bottom: 1px solid #EEE;
				width: 100rpx;
				text-align: center;
				margin-right: 10rpx;
			}
		}
		.submit{
			margin-top: 30rpx;
			font-size: 30rpx;
			letter-spacing: 13rpx;
			width: 100%;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			background-color: #FFD800;
			font-weight: bold;
			color: #FFF;
		}
	}
}
</style>
